<template>
	<view class="container">
		<view>
			<navSearchBar title="精选产品" :hasSearch="true" :readonly="false" @conFirmSearch="handleSearch"></navSearchBar>
			<view class="tab-img flex-col-between">
				<view v-for="item in moduleData" :key="item.id" @click="tabChange(item)" class="list-item">
					<view class="module-top">
						<text :style="{color:currentModule==item.id?item.color:'#A4A4A4'}">{{item.title}}</text>
						<image :src="currentModule==item.id?item.picture:item.picture_unselected" alt="" />
					</view>
					<view class="mudule-bottom" :style="{color:currentModule==item.id?item.color:'#A4A4A4'}">{{item.short_title}}</view>
					
				</view>
			</view>
			<view class="tab-text flex-col-between">
				<view class="tab-text-item" v-for="item in categoryData" :key="item.id" @click="tagChage(item.id)">
					<text :style="{color:currentTag == item.id?'#000000':'#5B5D65'}">{{item.title}}</text>
				</view>
			</view>
			<view class="sort flex-row-center">
				<view class="sort-item flex-col-center" v-for="item in sortData" :key="item.name" @click.stop="sortChange(item)">
					<text class="sort-text" :style="{color:item.value==currentSort?'#3B54DA':'#6F6F6F'}"
						>{{item.name}}</text>
					<view class="sort-icon" v-if="item.isSort">
						<image :src="item.sortMode=='asc'?'/static/product/sort-asc.png':item.sortMode=='desc'?'/static/product/sort-desc.png':'/static/product/sort.png'"></image>
						<!-- <view class="asc" @click.stop="sort(item.value,'asc')"></view>
						<view class="desc" @click.stop="sort(item.value,'desc')"></view> -->
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="content" scroll-y @scrolltolower="loadMore">
			<view class="product">
				<view class="product-item" v-for="item in list" :key="item.id" @click="toDetail(item)">
					<img class="product-img" :src="item.picture" alt="" />
					<view class="product-name ellipsis">{{item.title}}</view>
					<view class="product-sorce flex-col-between">
						<view class="sorce flex-row-center">
							<text>热度: </text>
							<text>{{item.hot}}</text>
						</view>
						<view class="sorce flex-row-center">
							<text>评分: </text>
							<text>{{item.score}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		moduleData,
		categoryData,
		sortData
	} from "./product.js"
	import pageShowOrHideMixin from '@/common/mixin/pageShowOrHideMixin'
	export default {
		mixins:[pageShowOrHideMixin],
		data() {
			return {
				search:"",
				moduleData,
				currentModule: "1",
				categoryData,
				currentTag: "1",
				sortData:[],
				currentSort: "sort",
				currentMode: "",
				list: [],
				currentPage:1,
				pageSize:20,
				total:0,
			};
		},
		onLoad(e) {
			console.log('eeeee',e,this.sortData)
			this.sortData = JSON.parse(JSON.stringify(sortData));
			this.getProductModule();
			this.getProductList()
		},
		onShow() {
			this.currentPath = '/pages/product/index';
			this.sendToServerOnShow();
		},
		// onReachBottom(){
		// 	console.log('onReachBottom')
		// 	if(this.total > this.pageSize * this.currentPage){
		// 		this.currentPage += 1;
		// 		this.getList();
		// 	}
		// },
		methods: {
			loadMore(){
				if(this.total > this.pageSize * this.currentPage){
					console.log('loadmore')
					this.currentPage += 1;
					this.getProductList();
				}
			},
			getProductModule(){
				this.$http.get('/api/business/product/module/select').then((res) => {
					if(res.data.status == 200) {
						this.moduleData = res.data.data;
						this.currentModule = this.moduleData[0].id;
						this.categoryData = this.moduleData[0].category;
						this.currentTag = this.moduleData[0].category[0].id;
					}
				})
			},
			async getProductList() {
				let par = {
					module_id: this.currentModule,
					category_id: this.currentTag,
					order_field: this.currentSort,
					order_mode: this.currentMode,
					title:this.search,
					page:this.currentPage,
					limit:this.pageSize,
				}
				this.$tip.loading();
				let res = await this.$api.productList(par);
				this.$tip.loaded();
				let list = res.data.data.data||[];
				this.list = this.list.concat(list);
				this.currentPage = res.data.data.current_page||1;
				this.pageSize =  res.data.data.per_page||20;
				this.total = res.data.data.total||0;
				console.log(this.list, "list")
			},
			handleSearch(val) {
				console.log('handleSearch',val)
				this.search = val;
				this.handleSearchByPage();
			},
			handleSearchByPage(){
				this.currentPage = 1;
				this.list = [];
				this.getProductList();
			},
			tabChange(item) {
				console.log('tabchange',item)
				if (this.currentModule == item.id) return
				this.currentModule = item.id;
				this.categoryData = item.category;
				this.currentTag = item.category[0].id;
				this.handleSearchByPage();
			},
			tagChage(id) {
				console.log('tagChage',id)
				if (this.currentTag == id) return;
				this.currentTag = id;
				this.handleSearchByPage();
			},
			sortChange(item) {
				// if (this.currentSort == item.value) return
				this.currentSort = item.value
				this.currentMode = item.value == 'sort'?'':item.sortMode=='asc'?'desc':'asc';
				this.sortData.forEach((el) => {
					console.log('vvvv',el,this.currentSort)
					if(el.value == this.currentSort){
						el.sortMode = this.currentMode;
					} else{
						el.sortMode = '';
					}
					
				})
				this.handleSearchByPage();
				console.log("sortChange",this.sortData)
			},
			sort(value, type) {
				
				// this.currentSort = value;
				// this.currentMode = type;
				// this.handleSearchByPage();
			},
			toDetail(item) {
				this.$Router.push({
					name: "productDetail",
					query:{id:item.id}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.tab-img {
		padding: 40rpx 40rpx 0;
		height: 146rpx;
		color:#A4A4A4;
		font-size: 24rpx;
		.list-item{
			width: 130rpx;
		}
		.module-top{
			display: flex;
			align-items: flex-end;
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: $Semibold;
			justify-content: space-between;
			margin-bottom: 10rpx;
			
			image{
				width: 50rpx;
				height: 50rpx;
				border-radius: 10rpx;
			}
			
		}
		.mudule-bottom{
			text-align: justify;
			text-align-last: justify;
			white-space: nowrap;
			line-height: 24rpx;
		}
	}

	.tab-text {
		padding: 0 56rpx;
		height: 148rpx;
		
		& :not(:last-of-type)::after {
			content: "";
			background: url("@/static/product/split.png");
			display: inline-block;
			width: 2rpx;
			height: 20rpx;
			margin-left: 40rpx;
		}

		text {
			font-size: $text-size;

		}
	}

	.sort {
		padding:0 40rpx;
		.sort-item {
			margin-right: 60rpx;
			font-size: $text-size;

		}

		.sort-icon {
			width: 10rpx;
			margin-left: 10rpx;
			image{
				width: 10rpx;
				height: 18rpx;
			}
			view {
				width: 0;
				height: 0;
				border-left: 8rpx solid transparent;
				border-right: 8rpx solid transparent;
				display: block;
				cursor: pointer;
			}

			.asc {
				border-bottom: 10rpx solid #D9D9D9;
				margin-bottom: 4rpx;
			}

			.desc {
				border-top: 10rpx solid #D9D9D9;
			}
		}
	}

	.content {
		flex-grow: 1;
		overflow: scroll;
	}

	.product {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 30rpx;
		padding: 30rpx 30rpx 30rpx;

		.product-item {
			width: 330rpx;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0 0 15rpx  rgba(0, 0, 0, 0.5);
		}

		.product-img {
			width: 100%;
			height: 246rpx;
			display: block;
		}

		.product-name {
			font-size: 28rpx;
			text-align: center;
			padding: 20rpx 20rpx 30rpx;
		}

		.product-sorce {
			padding: 0 20rpx 20rpx;

			.sorce {
				color: #6F6F6F;

				text {
					display: inline-block;
					line-height: 24rpx;
					font-size: $text-size;
				}

				text:nth-child(1) {
					margin-right: 20rpx;
				}
			}
		}
	}
</style>